import { Button, Form, Input, message, Card } from 'antd'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useUserStore } from '../../store/user.js'
import { userLogin } from '../../api/user.js'
import './AdminLogin.css'
import { UserOutlined, LockOutlined, CrownOutlined } from '@ant-design/icons'

export default function AdminLogin() {
    const [loading, setLoading] = useState(false)
    const [messageApi, contextHolder] = message.useMessage()
    const navigate = useNavigate()
    const login = useUserStore(state => state.login)

    const handleSubmit = async (values) => {
        setLoading(true)
        try {
            const res = await userLogin(values)
            if (res.data.code === 0) {
                const user = res.data.data
                
                // 检查是否为管理员
                if (user.userRole !== 'admin') {
                    messageApi.error('此账号无管理员权限，请使用管理员账号登录')
                    return
                }
                
                login(user)
                messageApi.success('管理员登录成功！')
                
                // 跳转到管理员首页
                setTimeout(() => {
                    navigate('/admin/dashboard')
                }, 1000)
            } else {
                messageApi.error(res.data.message || '登录失败')
            }
        } catch (error) {
            console.error('登录失败:', error)
            messageApi.error('登录失败，请检查网络连接')
        } finally {
            setLoading(false)
        }
    }

    const handleBackToHome = () => {
        navigate('/')
    }

    return (
        <div className="admin-login-container">
            {contextHolder}
            <div className="admin-login-background">
                <div className="admin-login-content">
                    <Card className="admin-login-card">
                        <div className="admin-login-header">
                            <div className="admin-logo">
                                <CrownOutlined className="crown-icon" />
                            </div>
                            <h1 className="admin-title">管理员登录</h1>
                            <p className="admin-subtitle">PromptCraft 管理系统</p>
                        </div>

                        <Form
                            name="adminLogin"
                            onFinish={handleSubmit}
                            autoComplete="off"
                            size="large"
                            className="admin-login-form"
                        >
                            <Form.Item
                                name="userAccount"
                                rules={[
                                    { required: true, message: '请输入管理员账号' },
                                    { min: 3, message: '账号至少3个字符' }
                                ]}
                            >
                                <Input 
                                    prefix={<UserOutlined />}
                                    placeholder="管理员账号" 
                                    autoComplete="username"
                                />
                            </Form.Item>

                            <Form.Item
                                name="userPassword"
                                rules={[
                                    { required: true, message: '请输入密码' },
                                    { min: 6, message: '密码至少6个字符' }
                                ]}
                            >
                                <Input.Password 
                                    prefix={<LockOutlined />}
                                    placeholder="密码"
                                    autoComplete="current-password"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Button 
                                    type="primary" 
                                    htmlType="submit" 
                                    loading={loading}
                                    className="admin-login-button"
                                    block
                                >
                                    {loading ? '登录中...' : '登录管理系统'}
                                </Button>
                            </Form.Item>
                        </Form>

                        <div className="admin-login-footer">
                            <Button 
                                type="link" 
                                onClick={handleBackToHome}
                                className="back-to-home-btn"
                            >
                                返回首页
                            </Button>
                        </div>

                        <div className="admin-login-tips">
                            <div className="tips-title">💡 管理员账号</div>
                            <div className="tips-content">
                                <p>默认管理员账号：<strong>admin</strong></p>
                                <p>默认密码：<strong>admin123</strong></p>
                            </div>
                        </div>
                    </Card>
                </div>
            </div>
        </div>
    )
}
